<template>
  <!--自定义按钮主体盒子-->
  <div class="button-main-box">
<!--    {{typeof scope}}-->
    <!-- :icon="item.icon"   -->
    <el-button
        :key="item.key+''+index"
        :type="item.type"
        @click="onButton(item,scope)"
        v-for="(item,index) in getButtons">
      {{ item.name }}
    </el-button>
  </div>
</template>

<script>
import config from "@/json/config.json";
import CommentForm from '@/components/commen/Form.vue'
import {findById, listFilter} from '@/components/request/publicApi'

export default {
  name: "CustomCommButton",
  components: {
    CommentForm
  },
  props: {
    config: {
      type: Object,
      default: () => {
        return {
          /*布局方向 vertical(垂直) horizontal(水平)*/
          LayoutDirection: "",
          /*按钮间距 单位px*/
          buttonSpaceBetween: 10,
          buttons: [
            {
              /*按钮功能类型 from（表单） operation（操作接口）*/
              functionType: "from",
              /*表单配置关联字段*/
              fromConfig: {},
              /*操作接口的类型 （）*/
              operationType: "",
              /*操作接口的访问接口*/
              operationPort: "",
              /*请求接口的参数 搜索框的 search ，表格选择的 tableList*/
              portPara: {
                search: {},
                tableList: {}
              },
              name: "添加用户",
              key: "12",
              icon: "",
              /*primary success info warning danger*/
              type: "primary",
              show: false,
            },
            {
              type: "danger",
              icon: "",
              key: "1",
              /*按钮功能类型 from（表单） operation（操作接口）*/
              functionType: "operation",
              fromConfig: {},
              /*操作接口的类型 （）*/
              operationType: "",
              /*操作接口的访问接口*/
              operationPort: "comm/del",
              /*请求接口的参数 搜索框的 search ，表格选择的 tableList*/
              portPara: {
                search: {},
                tableList: {}
              },
              name: "删除",
              show: false,
            },
          ]
        }
      }
    },
    buttons: {
      type: Array,
      default: () => {
        return [
          // {
          //   "key": "rbpypw",
          //   "action": "add",
          //   "position": "top",
          //   "openStyle": "new",
          //   "width": 1000,
          //   "formHeight": 600,
          //   show: false,
          //   "page": "648188ec6806cb3e0c66aede",
          //   type: "primary",
          // },
          // {
          //   type: "danger",
          //   icon: "",
          //   key: "1",
          //   /*按钮功能类型 from（表单） operation（操作接口）*/
          //   functionType: "operation",
          //   fromConfig: {},
          //   /*操作接口的类型 （）*/
          //   operationType: "",
          //   /*操作接口的访问接口*/
          //   operationPort: "comm/del",
          //   /*请求接口的参数 搜索框的 search ，表格选择的 tableList*/
          //   portPara: {
          //     search: {},
          //     tableList: {}
          //   },
          //   name: "删除",
          //   show: false,
          // },
        ]
      }
    },
    location:{
      type:String
    },
    buttonClick: {
      type: Function,
      require: false,
      default: null,
    },
    buttonKey:{
      type:String
    },
    scope:{
      type:Object
    },
    colItem:{
      type:Object
    }
  },
  data() {
    return {
      showComponent: true,
      input: "",
      /*隐藏显示标识*/
      dialogVisible: false,
      /*中间临时表单配置*/
      tempFromConfig: {
        /*表单多少列 默认1*/
        showPercent: 1,
        /*表单内的控件之间的间距 = 列之间的间距*/
        gutter: 0,
        /*宽度*/
        width: 100,
        /*宽度单位*/
        widthUnit: "%",
        /*默认标签文字宽度*/
        labelWidth: 100,
        /*按钮集合*/
        buttons: [],
        /*字段集合*/
        fieldLis: config.userManageFormFieldList,
        /*表单的标题*/
        fromTitle: "",
      },

    }
  },
  methods: {
    /*按钮点击事件*/
    onButton(item,scope) {
      if (this.buttonClick!=null){
        console.log('onButton',item,scope,this.colItem)
        this.buttonClick(item,scope,this.colItem);
      }
      this.$emit('buttonTrigger')
    },
    setTempFromConfig() {
      this.tempFromConfig = {
        /*表单多少列 默认1*/
        showPercent: 2,
        /*表单内的控件之间的间距 = 列之间的间距*/
        gutter: 0,
        /*宽度*/
        width: 100,
        /*宽度单位*/
        widthUnit: "%",
        /*默认标签文字宽度*/
        labelWidth: 100,
        /*按钮集合*/
        buttons: [
          {
            /*按钮功能类型 from（表单） operation（操作接口）*/
            functionType: "from",
            /*表单配置关联字段*/
            fromConfig: {},
            /*操作接口的类型 （）*/
            operationType: "add",
            /*操作接口的访问接口*/
            operationPort: "",
            /*请求接口的参数 搜索框的 search ，表格选择的 tableList*/
            portPara: {
              search: {},
              tableList: {}
            },
            name: "保存",
            key: "12s",
            icon: "",
            /*primary success info warning danger*/
            type: "primary",
          }, {
            /*按钮功能类型 from（表单） operation（操作接口）*/
            functionType: "from",
            /*表单配置关联字段*/
            fromConfig: {},
            /*操作接口的类型 （）*/
            operationType: "reset",
            /*操作接口的访问接口*/
            operationPort: "",
            /*请求接口的参数 搜索框的 search ，表格选择的 tableList*/
            portPara: {
              search: {},
              tableList: {}
            },
            name: "重置",
            key: "12",
            icon: "",
            /*primary success info warning danger*/
            type: "success",
          }, {
            /*按钮功能类型 from（表单） operation（操作接口）*/
            functionType: "from",
            /*表单配置关联字段*/
            fromConfig: {},
            /*操作接口的类型 （）*/
            operationType: "close",
            /*操作接口的访问接口*/
            operationPort: "",
            /*请求接口的参数 搜索框的 search ，表格选择的 tableList*/
            portPara: {
              search: {},
              tableList: {}
            },
            name: "关闭",
            key: "12",
            icon: "",
            /*primary success info warning danger*/
            type: "default",
          },],
        /*字段集合*/
        fieldLis: config.userManageFormFieldList,
        /*表单表头*/
        fromTitle: "用户",
      };
    },
    /*关闭按钮*/
    clearDialog() {
      this.dialogVisible = !this.dialogVisible;
    }
  },
  provide() {
    return {
      fClearDialog: this.clearDialog,
      // parDisplay: this.parDisplay,
    };
  },
  created() {
    // console.log('init',this.scope)
  },
  mounted() {
    console.log('init',this.colItem)
    console.log('initbuttons',this.buttons)
  },
  /*计算属性*/
  computed: {
    getButtons() {
      return listFilter(this.buttons, this.location,this.buttonKey);
      // return this.buttons;
    }
  },
}
</script>

<style scoped lang="less">

</style>
